import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class CreatePortal extends Component {

  constructor(props) {
    super(props);
    this.body = document.querySelector('body');
    this.el = document.createElement('div');
  }

  componentDidMount() {
    this.el.setAttribute('id', 'portal-root');
    this.body.appendChild(this.el);
  }

  componentWillUnmount() {
    this.body.removeChild(this.el);
  }

  // Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的方案。
  // 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
  render() {
    return ReactDOM.createPortal(this.props.children, this.el)
  }
}